<template>
  <j-modal
    :title="titles"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :footer="istype == 2 ? tr : false"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="密码">
          <span style="display: inline-block;padding-right: 50px;">{{ this.password }}</span>
          <a-switch v-if="istype == 2" v-model="show" :style="{ backgroundColor: show ? 'lime' : '' }" />
          <span style="display: inline-block;margin-left: 50px;">
            有效期:&nbsp;&nbsp;<span v-if="istype == 1 && day != 0">{{ day }}天</span>
            <span v-else-if="istype == 1 && day == 0">永久</span>
            <a-radio-group v-model="value" @change="onChange" v-if="istype == 2">
              1天
              <a-radio :value="1"> </a-radio>
              7天
              <a-radio :value="7"> </a-radio>
              长期
              <a-radio :value="0"> </a-radio>
              自定义
              <input
                min="1"
                type="number"
                @onfocus="Inputchange"
                @change="Inputchange"
                onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')"
                v-model="Nums"
                placeholder="数字(单位天)"
                class="Inputs"
              />
              <a-radio :value="8" style="margin-left: 10px;"> </a-radio>
            </a-radio-group>
          </span>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol2" :wrapperCol="wrapperCol">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分享备注</span>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol2" :wrapperCol="wrapperCol">
          <a-textarea     style="margin-left: 38px;"
            v-model:value="notes"
            maxlength="150"
            placeholder="请输入分享备注"
            :auto-size="{ minRows: 2, maxRows: 5 }"
          />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol2" :wrapperCol="wrapperCol">
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分享资源详情</span>
        </a-form-model-item>
        <a-form-model-item>
          <a-table
            size="middle"
            bordered
            :columns="columns"
            :loading="confirmLoading"
            :dataSource="dataSources"
            class="j-table-force-nowrap"
            style="margin-left: 38px;"
            :pagination="pagination"
            @change="handleTableChange"
          >
          </a-table>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction,shareIndexurl } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'BusTreviRiverPcModal',
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      validTime: '',
      show: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      value: 1,
      Nums: '',
      day: '',
      notes : '',
      confirmLoading: false,
      validatorRules: {
        userId: [{ required: true, message: '请输入用户id!' }]
      },
      url: {
        list: `/shareInfo/shareInfo/queryShareInfoDetails`,
        add: '/shareInfo/shareInfo/add',
        edit: '/shareInfo/shareInfo/add',
        linkpassword: '/shareInfo/shareInfo/getLinkPassword',
        detail: '/shareInfo/shareInfo/queryshareInfoIdDetails'
      },
      validatorRules: {
        content: [{ required: true, message: '请输入评论' }]
      },
      columns: [
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'projectName'
        },
        {
          title: '文件夹数量(个)',
          align: 'center',
          dataIndex: 'folderNumber'
        },
        {
          title: '文件数量(个)',
          align: 'center',
          dataIndex: 'fileNumber'
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createdDate'
        },
        {
          title: '创建人',
          align: 'center',
          dataIndex: 'creator'
        }
      ],
      password: '',
      dataSources: [],
      istype: '',
      id: '',
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      obj: {},
      tp: '',
      titles: ''
    }
  },
  mounted() {
    this.passwordlist()
  },
  methods: {
    //密码
    passwordlist() {
      let url = this.url.linkpassword
      getAction(url).then(res => {
        this.password = res.result
      })
    },
    add() {
      //初始化默认值
      this.edit({})
    },
    edit(record, type) {
      this.istype = type
      this.obj = record
      this.tp = type
      this.day = record.validTime
      this.model = Object.assign({}, record)
      this.visible = true
      // type用来判断是修改还是详情
      if (type == 1) {
        this.titles = '详情'
        const httpurl = this.url.detail
        const params = {
          shareInfoId: record.id,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
        // this.password = record.password
        // this.show = record.onOff == 1 ? true : false
        if (record.validTime == 1 || record.validTime == 7 || record.validTime == 0) {
          this.value = record.validTime
        } else {
          this.value = 8
          this.Nums = record.validTime
        }
        this.dataSources.push(record)

        // getAction(httpurl, params).then(res => {
        //   this.dataSources = res.result.records
        //   this.pagination.total = res.result.total
        // })
      } else if (type == 2) {
        this.titles = '分享'
        // this.password = record.password
        // this.show = record.onOff == 1 ? true : false
        this.dataSources.push(record)
        // this.id = record.id
        // const httpurl = this.url.detail
        // const params = {
        //   shareInfoId: record.id,
        //   pageNo: this.pagination.current,
        //   pageSize: this.pagination.pageSize
        // }
        // getAction(httpurl, params).then(res => {
        //   this.dataSources = res.result.records
        //   this.pagination.total = res.result.total
        // })
        // if (record.validTime == 1 || record.validTime == 7 || record.validTime == 0) {
        //   this.value = record.validTime
        // } else {
        //   this.value = 8
        //   this.Nums = record.validTime
        // }
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
      this.Nums = ''
      this.notes=''
      this.value = 1
      this.dataSources = []
    },
    Inputchange(e) {
      this.value = 8
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'post'
          }
          let param = {
            onOff: this.show == true ? 1 : 2,
            validTime: this.value == 8 ? this.Nums : this.value,
            resourceIdList: this.model.resourceId,
            type:'1',
            url:shareIndexurl,
            password:this.password,
            notes: this.notes
          }
          httpAction(httpurl, param, method)
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                this.Nums = ''
                this.value = 1
                console.log(this.$parent.$parent.loadData(), 'tthis')
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.close()
    },
    onChange(e) {
      console.log('radio checked', e.target.value)
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter, '===========')
      this.pagination.current = pagination.current
      this.edit(this.obj, this.tp)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-radio-inner {
  border-color: lime;
}
/deep/ .ant-form-item {
  margin-bottom: 0;
}
.Inputs {
  width: 101px;
  border-radius: 6px;
  border: 1px solid gray;
}
</style>
